<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #e8e8e8;
            overflow: hidden;
        }
    </style>
    <script src="js/TextCircle（老师）.js"></script>
    <script src="js/konva.js"></script>
</head>
<body>
<!--存放舞台的容器-->
<div id = "container"></div>

<script>
    // 1.创建舞台
    var stage = new Konva.Stage({
        width : window.innerWidth,
        height : window.innerHeight,
        container : "container"
    });
    // 2.创建背景层
    var bglayer = new Konva.Layer();
    stage.add(bglayer);
    // 2.1.常量
    // 圆心
    var circleX = stage.width()*0.5,circleY = stage.height()*0.5;
    // 半径
    var bg_inner_circle_r = 150,
        bg_outer_circle_r = 250;
    // 2.2.创建内圆
    var inner_circle = new Konva.Circle({
        x : circleX,
        y : circleY,
        radius: bg_inner_circle_r,
        stroke: '#ccc',
        strokeWidth:5,
        dash :[7,3]
    });
    //添加内圆
    bglayer.add(inner_circle);
    // 2.3.创建外圆
    var outer_circle = new Konva.Circle({
        x : circleX,
        y : circleY,
        radius: bg_outer_circle_r,
        stroke: '#ccc',
        strokeWidth:5,
        dash :[7,3]
    });
    //添加外圆
    bglayer.add(outer_circle);
    // 2.4.创建中心文字圆
    var center_text_circle = new TextCircle({
        circleX : circleX,
        circleY : circleY,
        innerRadius :70,
        outerRadius :80,
        innerFill :'blue',
        outerColor :'#ccc',
        text :"小码哥教育"
    });
    center_text_circle.render(bglayer);
    // 2.5.绘制背景层
    bglayer.draw();

    // 3.创建动画层
    var annimation_layer = new Konva.Layer();
    stage.add(annimation_layer);

    // 3.1 创建内组
    var inner_group = new Konva.Group({
        x :circleX,
        y :circleY
    });
    annimation_layer.add(inner_group);

    // 3.2 UI
    var UI = new TextCircle({
        circleX : bg_inner_circle_r * Math.cos(120*Math.PI/180),
        circleY : bg_inner_circle_r * Math.sin(120*Math.PI/180),
        innerRadius :35,
        outerRadius :40,
        innerFill :'red',
        outerColor :'#ccc',
        text :"UI"
    });
    UI.render(inner_group);

    // 3.3HTML5
    var HTML5 = new TextCircle({
        circleX : bg_inner_circle_r * Math.cos(240*Math.PI/180),
        circleY : bg_inner_circle_r * Math.sin(240*Math.PI/180),
        innerRadius :35,
        outerRadius :40,
        innerFill :'pink',
        outerColor :'#ccc',
        text :"HTML5"
    });
    HTML5.render(inner_group);

    // 3.4iOS
    var iOS  = new TextCircle({
        circleX : bg_inner_circle_r * Math.cos(360*Math.PI/180),
        circleY : bg_inner_circle_r * Math.sin(360*Math.PI/180),
        innerRadius :35,
        outerRadius :40,
        innerFill :'black',
        outerColor :'#ccc',
        text :"iOS "
    });
    iOS .render(inner_group);

    // 4.创建外组
    var outer_group = new Konva.Group({
        x :circleX,
        y :circleY
    });
    annimation_layer.add(outer_group);

    // 4.1C++
    var cpp  = new TextCircle({
        circleX : bg_outer_circle_r * Math.cos(360*Math.PI/180),
        circleY : bg_outer_circle_r * Math.sin(360*Math.PI/180),
        innerRadius :45,
        outerRadius :50,
        innerFill :'skyblue',
        outerColor :'#ccc',
        text :"c++ "
    });
    cpp .render(outer_group);

    // 4.2java
    var java  = new TextCircle({
        circleX : bg_outer_circle_r * Math.cos(120*Math.PI/180),
        circleY : bg_outer_circle_r * Math.sin(120*Math.PI/180),
        innerRadius :45,
        outerRadius :50,
        innerFill :'purple',
        outerColor :'#ccc',
        text :"java "
    });
    java .render(outer_group);

    // 4.3Android
    var Android  = new TextCircle({
        circleX : bg_outer_circle_r * Math.cos(240*Math.PI/180),
        circleY : bg_outer_circle_r * Math.sin(240*Math.PI/180),
        innerRadius :45,
        outerRadius :50,
        innerFill :'green',
        outerColor :'#ccc',
        text :"Android "
    });
    Android .render(outer_group);


    // 5.绘制动画层
    annimation_layer.draw();
    // 6.执行动画
    // 1s旋转的度数
    var anglePerSecend = 60;

    // 创建动画
    var anima = new Konva.Animation(function (frame) { // 相当于特殊的定时器
        // 距离上一帧的时间(ms)
        var timeDiff = frame.timeDiff/1000;
        // 求出1帧旋转的度数
        var angel = timeDiff * anglePerSecend;

        // 内组执行动画
        inner_group.rotate(angel);
        inner_group.getChildren().rotate(-angel);

        // 外组执行动画
        outer_group.rotate(-angel);
        outer_group.getChildren().rotate(angel);

    },annimation_layer);
    //开启动画
    anima.start();

    // 7.绑定事件
    annimation_layer.on('mouseover',function () {
        anglePerSecend = 20;
    });

    annimation_layer.on('mouseout',function () {
        anglePerSecend = 60;
    });
</script>
</body>
</html>